<template>
  <div class="star" :class="starType">
    <span v-for="itemClass in itemClasses" class="star-item" :class="itemClass" track-by="$index">

    </span>
  </div>
</template>

<script>
  const  LENGTH =5;
  const  CLS_ON ='on';
  const  CLS_HALF = 'half';
  const  CLS_OFF ='off';
  export default {
    name: "star",
    props:{
      size:{
        type:Number,
        default(){
          return 12
        }
      },
      score:{
        type:Number,
        default() {
          return 0;
        }
      }
    },
    computed:{
      starType(){
        return 'star-'+this.size;
      },
      itemClasses(){
        let result = [];
        let score = Math.floor(this.score*2)/2;
        let hasDecimal = score%1!==0;
        let integer = Math.floor(score);
        for(let i=0;i<integer;i++){
          result.push(CLS_ON)
        }
        if(hasDecimal){
          result.push(CLS_HALF)
        }
        while (result.length<LENGTH){
          result.push(CLS_OFF)
        }
        return  result;
      }
    }
  }
</script>

<style scoped lang="stylus">
  .star
    font-size 0
    .star-item
      display inline-block
      height 12px
      width 12px
      &.on
        background url("icon_star2.svg") no-repeat center center /12px 12px
      &.half
        background url("icon_star3.svg") no-repeat center center /12px 12px
      &.off
        background url("icon_star1.svg") no-repeat center center /12px 12px


</style>
